.koo-Tabs-nav {
  margin: 0;
  padding: 0;
  border: none;
  list-style-type: none;
}

.koo-Tabs {
  display: inline-block;
  cursor: pointer;

  &:hover {
    color: var(--koo-blue-5);
  }
}

.koo-Tabs-nav-centered {
  display: flex;
  justify-content: center;
}

.koo-Tabs-nav-top {
  display: flex;
  flex-direction: column;

  .koo-Tabs {
    margin: 0 1rem;
  }

  .koo-Tabs-active {
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--koo-blue-7);
    color: var(--koo-blue-5);
  }

  .koo-Tabs-content {
    border-top: 1px solid var(--koo-gray-3);
    padding-top: 1rem;
  }
}

.koo-Tabs-nav-bottom {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 1rem;

  .koo-Tabs {
    margin: 0 1rem;
  }

  .koo-Tabs-active {
    padding-top: 1rem;
    border-top: 2px solid var(--koo-blue-7);
    border-bottom: none;
    color: var(--koo-blue-5);
  }

  .koo-Tabs-content {
    border-bottom: 1px solid var(--koo-gray-3);
    padding-bottom: 1rem;
  }
}

.koo-Tabs-nav-left {
  display: flex;
  flex-direction: row;
  overflow: hidden;

  .koo-Tabs {
    display: flex;
    flex-direction: row;
    padding: 1rem 1rem 1rem 0;
    margin: 0;
    cursor: pointer;
  }

  .koo-Tabs-active {
    border-right: 2px solid var(--koo-blue-7);
    border-bottom: none;
    color: var(--koo-blue-5);
  }

  .koo-Tabs-content {
    border-left: 1px solid var(--koo-gray-3);
    padding-left: 1rem;
  }
}

.koo-Tabs-nav-right {
  display: flex;
  flex-direction: row-reverse;
  overflow: auto;

  .koo-Tabs {
    flex: 100%;
    display: flex;
    flex-direction: row;
    padding: 1rem 0 1rem 1rem;
    margin: 0;
    cursor: pointer;
  }

  .koo-Tabs-active {
    border-left: 2px solid var(--koo-blue-7);
    border-bottom: none;
    color: var(--koo-blue-5);
  }

  .koo-Tabs-content {
    flex: 80%;
    width: auto;
    border-right: 1px solid var(--koo-gray-3);
    padding-right: 1rem;
  }
}

.koo-Tabs-card {
  padding: 1rem;
  margin: 0;
  background-color: var(--koo-gray-3);
  border: 1px solid var(--koo-gray-5);
  border-radius: 0.25rem 0.25rem 0 0;
}

.koo-Tabs-nav-card {
  .koo-Tabs-content {
    border-top: 1px solid var(--koo-gray-3);
    padding-top: 1rem;
  }
}

.koo-Tabs-active {
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--koo-blue-7);
  color: var(--koo-blue-5);
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  0% {
    border-bottom-color: var(--koo-gray-3);
  }

  50% {
    border-bottom-color: var(--koo-blue-5);
  }

  100% {
    border-bottom-color: var(--koo-blue-7);
  }
}

.koo-Tabs-active-card {
  background-color: transparent;
  border-bottom: none;
}

.koo-Tabs-content {
  display: block;
  overflow: hidden;
  transition: 0.5s linear infinite;
}

.koo-Tabs-disable {
  cursor: not-allowed;
  color: var(--koo-gray-6);
  border: none;

  &:hover {
    color: var(--koo-gray-6);
  }
}

.koo-Tabs-large {
  font-size: var(--koo-font-lg);
}

.koo-Tabs-middle {
  font-size: var(--koo-font-base);
}

.koo-Tabs-small {
  font-size: var(--koo-font-sm);
}
